<template>
	<div class="menu-wrapper">
		<Menu ref="menu"
		      class="node-menu"
		      theme="dark"
		      width="auto"
		      :spread="spread"
		      :accordion="true"
		      :open-names="openFold"
		      :active-name="activeIndex"
		      @on-select="navTo">
			<div class="layout-logo-left text-right"
			     slot="head">
				<div class="app-box">
					<Icon type="android-apps"></Icon>{{app}}</div>
				<Button @click="$store.dispatch('fetchNodes')"
				        type="text"
				        icon="refresh"
				        v-show="!spread"></Button>
			</div>
			<template v-for="(node,index) in data">
				<Submenu ref="subMenu"
				         v-if="node.children && node.children.length"
				         :name="node.code"
				         :key="index"
				         :spread="spread"
				         :title="node.name">
					<template slot="title">
						<Icon :type="nodeIcon(node)"></Icon>
						<span class="menu-text"
						      ref="nodeName">{{node.name}}</span>
					</template>
					<Menu-item v-for="child in sortChild(node.children)"
					           :class="{'menu-item-selected': activeIndex === child.code}"
					           :name="child.code"
					           :key="child.code">
						<Icon :type="nodeIcon(child,true)"></Icon>
						{{child.name}}
					</Menu-item>
				</Submenu>

			</template>
			<div slot="footer"
			     class="menu-footer">
				@ {{footer}}
			</div>
		</Menu>
		<Spin class="menu-spin"
		      size="large"
		      fix
		      v-if="!isLoad"></Spin>
	</div>
</template>
<script>
import nodeIcons from './icon';
import $ from '@/common';
import Menu from '@/element/menu';
export default {
	name: 'nodeMenu',
	components: {
		...Menu,
	},
	props: {
		data: {},
		spread: {
			default: false,
		},
		footer: {},
		menuHeight: null,
	},
	data() {
		return {
			isLoad: true,
			app: window.App,
			activePosition: '',
		};
	},
	created() {},
	computed: {
		iconSize() {
			return 14;
		},
		activeIndex() {
			var code = this.$route.params.node;
			if ($.nodeList[code]) {
				return $.nodeList[code].code;
			} else {
				return null;
			}
		},
		openFold() {
			var code = this.$route.params.node;
			if (!code || !$.nodeList[code]) {
				return [];
			}
			var parentNode = $.nodeList[$.nodeList[code].parent_code];
			if ($.nodeList[code] && parentNode) {
				return [parentNode.code];
			} else {
				return [];
			}
		},
	},
	methods: {
		navTo(index) {
			if (index) {
				//界面展开状态下，进入新节点将会隐藏菜单
				if (this.spread) {
					this.closeFolder();
				}
				this.$router.push(`/page/${$.getNodeCode(index)}`);
			}
		},
		sortChild(data) {
			var res = $.copy(data).sort((a, b) => a.serial - b.serial);
			return res;
		},
		nodeIcon(node, child) {
			return nodeIcons[$.getNodeCode(node.code)] || (child ? null : 'navicon-round');
		},
		closeFolder() {
			if (this.$refs.subMenu) {
				this.$refs.subMenu.forEach(item => {
					item.opened = false;
				});
			}
		},
		hiddenItem() {
			this.activePosition = 100;
		},
	},
};
</script>
<style lang="less">
.layout .layout-menu {
	display: flex;
	flex-direction: column;
}

.menu-wrapper {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	.scrollbar_bar {
		z-index: 1001;
	}
	.scrollbar_bar.is-vertical {
		right: 2px;
		top: 0;
	}
	.scrollbar_thumb {
		background-color: rgba(144, 146, 152, 0.6);
		transform: height 0.3s;
	}
}

.node-menu {
	flex: 1;
	width: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
	.scrollbar-box {
		z-index: 1;
	}
	.menu-list {
		flex: 1;
		overflow: hidden;
	}
	.menu-footer {
		color: #c0c8cd;
		font-size: 12px;
		text-align: center;
		background: #495060;
		padding: 4px 0;
	}
}

.menu-spin {
	background: transparent;
}

.ivu-menu-submenu.ivu-menu-item-active {
	border-left: 2px solid #2d8cf0;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item.menu-item-selected,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item.menu-item-selected:hover {
	color: #fff;
	background-color: #2d8cf0 !important;
}
.node-menu.ivu-menu-vertical {
	.ivu-menu-item,
	.ivu-menu-submenu-title {
		padding: 12px 24px;
		padding-right: 12px;
	}
}

.app-box {
	float: left;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 14px;
	padding-left: 12px;
	.ivu-icon {
		font-size: 18px;
		position: relative;
		top: 1px;
		margin-right: 8px;
	}
}

.node-menu {
	.ivu-menu-submenu-title {
		.ivu-icon:first-child {
			font-size: 16px;
			width: 12px;
			top: 2px;
			position: relative;
			text-align: center;
			line-height: 1;
		}
	}
}

.layout-spread {
	.node-menu.ivu-menu {
		width: 60px !important;
		.ivu-menu-opened .ivu-menu {
			display: none;
		}
		.ivu-menu-opened {
			.ivu-menu-submenu-title {
				background: #363e4f;
				z-index: 2;
			}
		}
	}
	.ivu-menu-submenu {
		background: #495060;
		.menu-title {
			padding: 15px 4px;
			color: #ffffff;
			font-size: 13px;
		}
		position: relative;
		.ivu-menu {
			position: relative;
			z-index: 100;
			background: #363e4f;
			min-width: 160px;
			width: auto;
			text-align: left;
			top: -45px;
			left: 57px;
			margin-bottom: -45px;
			.ivu-menu-item {
				padding: 12px 8px;
				font-size: 13px;
				&.ivu-menu-item-active {
					background: transparent !important;
					color: #3698ff;
					font-weight: bold;
				}
			}
		}
	}
	.ivu-menu-submenu-title-icon {
		display: none;
	}
}

.layout-logo-left {
	.ivu-btn {
		color: #fff;
	}
}
</style>
